<template>
    <div class="order-report">
        <div class="report-table-top-title" style="height: 50px">
            报钟器管理
            <span
                style="color: #000; font-size: 15px; margin-left: 20px"
            ></span>
            <span style="float: right">
                <el-button type="primary" plain size="small" @click="save"
                    >确认保存</el-button
                >
                <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="$emit('save')"
                    >返回</el-button
                >
            </span>
        </div>
        <!-- 表单主体 -->
        <div class="report-table-form1">
            <el-form
                @submit.native.prevent
                ref="form"
                :model="form"
                :rules="rules"
                size="small"
                label-width="100px"
            >
                <el-form-item label="代理商：" prop="agentId">
                    <el-select
                        class="items"
                        v-model="form.agentId"
                        filterable
                        remote
                        clearable
                        reserve-keyword
                        :remote-method="remoteMethod"
                        :loading="listLoading"
                        placeholder="请输入代理商"
                        @change="getName"
                        size="small"
                    >
                        <el-option
                            v-for="item in agentList"
                            :key="item.id"
                            :label="item.agentName"
                            :value="item.id"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="发货时间：" prop="deliveryTime">
                    <el-date-picker
                        v-model="form.deliveryTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss"
                        type="datetime"
                        placeholder="选择日期时间"
                    >
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="设备信息：" prop="marketInfo">
                    <div class="flex">
                        <el-input
                            size="small"
                            class="item"
                            v-model="chipCode"
                            placeholder="请输入SN码"
                            @keyup.enter.native="addAnswer(form.id)"
                            style="margin-right: 10px"
                        ></el-input>
                        <el-button
                            type="primary"
                            size="small"
                            @click="addAnswer(form.id)"
                            v-show="
                                (form.id && form.marketInfo.length == 0) ||
                                !form.id
                            "
                            >确认{{
                                form.id && form.marketInfo.length == 0
                                    ? '修改'
                                    : '添加'
                            }}</el-button
                        >
                    </div>
                    <div
                        style="margin-top: 20px"
                        v-if="form.marketInfo.length > 0"
                    >
                        <div
                            v-for="(item, index) in form.marketInfo"
                            style="margin-bottom: 20px"
                            :key="index"
                        >
                            <div class="flex">
                                <el-input
                                    size="small"
                                    class="item"
                                    disabled
                                    v-model="item.chipCode"
                                ></el-input>
                                <i
                                    class="el-icon-circle-close del"
                                    @click="del(index)"
                                ></i>
                            </div>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    props: {
        row: Object
    },
    data: function () {
        return {
            chipCode: '',
            listLoading: false,
            currIndex: -1,
            isShow: false,
            currRow: null,
            tabData: [],
            loading: false,
            showValue: false,
            form: {
                id: '',
                name: '',
                deliveryTime: '',
                agentId: '',
                agentName: '',
                marketInfo: [
                ]
            },
            rules: {
                agentId: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                deliveryTime: [
                    { required: true, message: '不能为空', trigger: 'blur' }
                ],
                marketInfo: [
                    { required: true, message: '请先确认', trigger: 'change' }
                ]
            },
            agentList: []
        }
    },
    mounted () {
    },
    created () {
        console.log(this.row)
        if (this.row.id) {
            this.form = this.copyArr(this.row)
            this.chipCode = this.row.chipCode
            this.$set(this.form, 'marketInfo', [])
            this.getAnageList(this.form.agentName)
        }
    },
    computed: {

    },
    components: {
    },
    methods: {
        addAnswer (id) {
            if (this.form.marketInfo.length > 0 & id) {
                return
            }
            if (this.form.agentId === '') {
                this.$message({
                    message: '代理商不能为空',
                    type: 'warning'
                })
                return
            }
            if (this.chipCode === '') {
                this.$message({
                    message: 'SN码不能为空',
                    type: 'warning'
                })
                return
            }
            let sum = 0
            this.form.marketInfo.forEach(item => {
                if (item.chipCode === this.chipCode) {
                    sum++
                }
            })
            console.log(sum)
            if (sum > 0) {
                this.$message({
                    message: 'SN码已添加，请勿重复添加',
                    type: 'warning'
                })
                return
            }
            this.loading = true
            this.$http.post(this.$store.state.IP + '/stoneOrderManage/stoneSnCheck', {
                chipCode: this.chipCode,
                agentId: this.form.agentId,
                terminalType: 4, // 报钟器4写死
                id: this.row.id || null
            },
                {
                    'emulateJSON': false
                }
            ).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    this.form.marketInfo.push({
                        terminalType: 4,
                        chipCode: this.chipCode,
                        id: id
                    })
                    this.chipCode = ''
                    this.loading = false
                }
                if (response.ret === '11307') {
                    this.$confirm(response.msg, '提示', {
                        confirmButtonText: '是',
                        cancelButtonText: '否',
                        type: 'warning'
                    }).then(() => {
                        this.form.marketInfo.push({
                            terminalType: 4,
                            chipCode: this.chipCode,
                            id: id
                        })
                        this.chipCode = ''
                        this.loading = false
                    }).catch(() => {

                    })
                }
                this.loading = false
            }, response => {
                this.loading = false
                console.log('通讯失败')
            })
        },
        del (index) {
            this.$confirm('确定删除吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.form.marketInfo.splice(index, 1)
            }).catch(() => {

            })
        },
        // 保存表单
        save () {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    if (this.form.marketInfo.length === 0) {
                        this.$message({
                            message: '设备信息不能为空',
                            type: 'warning'
                        })
                        return
                    }
                    this.loading = true
                    this.$http.post(this.$store.state.IP + '/stoneOrderManage/stoneOrderInput', {
                        ...this.form
                    },
                        {
                            'emulateJSON': false
                        }
                    ).then(response => {
                        console.log('-------------------------------------------')
                        response = response.body
                        console.log(response)
                        if (response.ret === '0') {
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            })
                            this.$emit('save')
                            this.loading = false
                        } else {
                            this.loading = false
                        }
                    }, response => {
                        this.loading = false
                        console.log('通讯失败')
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        getName (id) {
            let obj = null
            this.agentList.some(item => {
                if (item.id === id) {
                    obj = item
                }
            })
            this.form.agentName = obj ? obj.agentName : ''
            console.log(this.form)
        },
        remoteMethod (query) {
            if (query !== '') {
                this.listLoading = true
                this.getAnageList(query)
            } else {
                this.agentList = []
            }
        },
        getAnageList (agentName) {
            // 获取 所有 代理商列表
            let params = {
                params: {
                }
            }
            this.$http.get(this.$store.state.IP + '/stoneOrderManage/selectAgent?agentName=' + agentName, params).then(response => {
                console.log('-------------------------------------------')
                response = response.body
                console.log(response)
                if (response.ret === '0') {
                    console.log('调用获取所有代理商成功')
                    this.agentList = response.res
                    this.listLoading = false
                }
                if (response.ret !== '0') {
                    this.listLoading = false
                    console.log('调用获取所有代理商失败')
                }
                console.log('******************************************')
            }, response => {
                this.listLoading = false
                console.log('通讯失败')
            })
        }
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
.tipPic
    width: 925px
    height: 300px
    background: url('../../../../common/pic/addShopPic.png')
    background-repeat: no-repeat
    background-size: cover

.el-transfer-panel
    width: 400px

.report-table-form1
    width: 100%
    min-height: 40px
    padding: 16px 0 0 22px
    box-sizing: border-box
    background: #fff
    overflow: hidden

.report-table-top-title
    width: 100%
    height: 64px
    line-height: 64px
    color: #000
    font-size: 18px

.order-report-agent
    width: 100%
    background: #f1f0f5

    .el-transfer__button:first-child
        display: none

    .report-table-block
        width: 100%
        padding-top: 22px
        height: 50px
        background: #fff
        box-sizing: border-box

        .report-table-block-in
            float: right
            padding-right: 17px

    .page-padding-gray-small
        width: 100%
        height: 22px
        background: #f1f0f5

    .page-padding
        width: 100%
        height: 20px
        background: #fff

    .report-table-total
        width: 100%
        font-size: 16px
        color: #409EFF
        padding: 22px
        margin-top: 22px
        box-sizing: border-box
        background: #fff

.item
    width: 220px

.flex
    display: flex
    align-items: center

.del
    color: #f56c6c
    font-size: 20px

.wrap
    max-height: 400px
    overflow: auto
</style>
